<template>
  <div>
    <van-nav-bar
  title="文档详情"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    <div class="document-detail">
      <h2>{{ document.title }}</h2>
      <p>{{ document.content }}</p>
      <div class="images">
        <img v-for="(img, imgIndex) in document.images" :key="imgIndex" :src="img" style="width: 100px;" alt="Image">
      </div>
      <span :class="['read-status', { 'unread': !document.readStatus }]"></span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
 const onClickLeft = () => history.back();
const route = useRoute();
const document = JSON.parse(route.query.document as string);
</script>

<style scoped>
.read-status {
  color: orange;
}
.read-status.unread {
  color: red;
}
</style>    